<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="ElementUI/index.css" rel="stylesheet" >
</head>

<body>
<div id="app">
<!--
        表单校验：
            1、:rules="myrules" 指定校验规则 myrules需要定义在data里面是一个对象
            2、在你需要校验属性的el-form-item 加上prop="当前校验的属性名称"
            3、myrules 里面写对应校验规则
-->
    <el-form :model="form" :rules="myrules">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="地址">
            <el-input v-model="form.addr"></el-input>
<!--           el-form-item 放任何元素都行，不是表单元素都行
                最常放的就是  单选框 复选框 下拉框 文本域 输入框 文件上传
                -->
        </el-form-item>

        <el-button type="primary" @click="save">保存</el-button>
    </el-form>
</div>
<script src="ElementUI/vue.js"></script>
<script src="ElementUI/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            form:{},//收集整个表单数据的对象
            myrules:{
                name:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    {
                        //自定义校验规则
                        validator:(rule,value,callback)=>{
                              //value 当前输入框的值
                            //callback 回调函数
                            if(value == "爸爸"){
                                callback();//校验成功就不传错误信息
                            } else {
                                callback('叫爸爸');//校验失败把错误传入
                            }
                        }
                    }
                ]
            },
        },
        methods:{
            save(){
                console.log(this.form);
            }
        },
        created(){

        }

    })


</script>
</body>
</html>
